<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script language="javascript">
var SITE_URL = "<?=site_url()?>";
var BASE_URL = "<?=base_url()?>";
</script>

<link rel="stylesheet" type="text/css" href="<?=base_url('content_management')?>css/dragdrop.css" />
<link rel="stylesheet" type="text/css" href="<?=base_url('content_management')?>css/tabs.css" />
<link rel="stylesheet" type="text/css" href="<?=base_url('content_management')?>css/proto.menu.0.6.css" />
<link rel="stylesheet" type="text/css" href="<?=base_url('content_management')?>css/tree.css" />
<script language='javascript' type='text/javascript' src="<?=base_url()?>application/assets/scripts/prototype.js"></script>
<script language='javascript' type='text/javascript' src="<?=base_url('content_management')?>scripts/effects.js"></script>
<script language='javascript' type='text/javascript' src="<?=base_url('content_management')?>scripts/dragdrop.js"></script>
<script language='javascript' type='text/javascript' src="<?=base_url('content_management')?>scripts/proto.menu.0.6.js"></script>
<script language='javascript' type='text/javascript' src="<?=base_url('content_management')?>scripts/content.js"></script>
<script language='javascript' type='text/javascript' src="<?=base_url('content_management')?>scripts/Tree.js"></script>

<script type="text/javascript">
var tree = null;
var current_item = null; 
var current_page = null;  
var struct_list = <?=$struct_list?>
var nodeRoot = 'nRoot';
var context_menus = new Array();
function TafelTreeInit() {
    var struct = struct_list;
        
    tree = new TafelTree('tree_content', struct, {
        'generate' : true,
        'imgBase' : '<?=base_url('content_management')?>images/',
        'defaultImg' : 'page.gif',
        'defaultImgOpen' : 'folderopen.gif',
        'defaultImgClose' : 'folder.gif',
        'onMouseOver' : funcMouseOver,
        'onMouseOut' : funcMouseOut,
        'onEditAjax' : [funcEdit, '<?=site_url()?>admin_ajax/content_management.content_process.change_label'],
        'onDrop' : function(){return true;},
        'onDropAjax' : [funcDropAjax, '<?=site_url()?>admin_ajax/content_management.content_process.change_parrent'],
        'copyDrag' : true
    });
}

function funcMouseOut (branch) {
    branch.removeClass('funcMouseOver');
    branch.addClass('funcMouseOut');
}

function funcMouseOver (branch) {
    branch.removeClass('funcMouseOut');
    branch.addClass('funcMouseOver');
}

function Addnew(){
    if(current_item){
        if(current_item==nodeRoot){
            return;
        }
        var arr_item = current_item.split("_");
        if(arr_item[1]!=0){
            add_submenu(arr_item[0],arr_item[1]);
        }
        else {
            //alert('Tao menu item hay link page');
            var answer = confirm("What would you like to add a Submenu item or a Page Item?")
            if (answer){
                add_submenu(arr_item[0],arr_item[1]);
            }
            else{
                content.pageAdd(arr_item[0]);
            }
        }
    }
}

function myClick (branch) { 
    current_item = branch.getId();
}

function funcEdit (branch, response) {
    return response;
}
function funcDropAjax (branch, response, serverText) {
    if(serverText.match("<success>"))
        document.location.reload();
    else
        return false;
}

function setDroppables(){
    Droppables.add('div_middle_content', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){							
        content.dropItem(encodeURIComponent(element.id) , dropon.id)
    }});
    Droppables.add('div_left_content', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){							
        content.dropItem(encodeURIComponent(element.id) , dropon.id)
    }});
    Droppables.add('div_right_content', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){							
        content.dropItem(encodeURIComponent(element.id) , dropon.id)
    }})
}

function cancelDroppables(){
    Droppables.remove('div_middle_content');
    Droppables.remove('div_left_content');
    Droppables.remove('div_right_content');
 }

function getBranch(e){
    idx = e.element().id; 
    if(idx.empty())
        return false;
    tmp = idx.split('_');
    idx = tmp[tmp.length-1];
    root = tree.getBranchById(nodeRoot);
    branches = root.getBranches();
    branch = branches[idx-2];
    return branch;
}

var fixedLinkMenuItems = [
    {
        name: 'New Menu Item',
        className: 'newmenu',
        callback: function(e) {
            branch = getBranch(e);
            var arr_item = branch.getId().split("_");
            content.navigationAdd(arr_item[0]);
        }
    },
    {
        separator: true
    },

    {
        name: 'New Page',
        className: 'new',
        callback: function(e) {
            branch = getBranch(e);
            var arr_item = branch.getId().split("_");
            if(arr_item[1]!=0)
                return false;
            content.pageAdd(arr_item[0]);
        }
    },
    {
        separator: true
    },
    {
        name: 'Move Up',
        className: 'move_up',
        callback: function(e) {
            branch = getBranch(e);
            var arr_item = branch.getId().split("_");
            content.navigationMoveUp(arr_item[0]);
        }
    },
    {
        name: 'Move Down',
        className: 'move_down',
        callback: function(e) {
            branch = getBranch(e);
            var arr_item = branch.getId().split("_");
            content.navigationMoveDown(arr_item[0]);
        }
    }
];

var dynamicPageMenuItems = [
    {
        name: 'Edit',
        className: 'edit', 
        callback: function(e) {
            branch = getBranch(e);
            if(branch!=false){
                current_page = branch.getId();
                current_item = null; 
                var arr_item = current_page.split("_");

                var parentNone = branch.getParent();
                var nav = 1;
                if(parentNone.getId()==nodeRoot)
                    nav = 0;
                parent.content.pageClick (arr_item[1], nav);
            }
        }
    }
];

var fixedPageMenuItems = [
    {
        name: 'Edit',
        className: 'edit', 
        callback: function(e) {
            branch = getBranch(e);
            if(branch!=false){
                current_page = branch.getId();
                current_item = null; 
                var arr_item = current_page.split("_");

                var parentNone = branch.getParent();
                var nav = 1;
                if(parentNone.getId()==nodeRoot)
                    nav = 0;
                parent.content.pageClick (arr_item[1], nav);
            }
        }
    }
];
    
function TafelTreeInit_callback(){
    $$('.menu.desktop').each(function (e){
        e.remove();
    });

    root = tree.getBranchById(nodeRoot); 
    branches = root.getBranches();
    
    for (var i = 0; i < branches.length; i++) {
        // Context menu for page item
        if(branches[i].getId().indexOf('page')>=0){
            var parent = branches[i].getParent();
            if(parent && parent.getId()=='nRoot'){
                context_menus[i] = new Proto.Menu({
                    selector: '#tafelTree_tree_content_id_'+(i+2), 
                    className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
                    menuItems: fixedPageMenuItems,
                    beforeShow: function(){
                        for(j=0;j<context_menus.length;j++)
                            context_menus[j].container.hide();
                    }
                });
            }else{
                context_menus[i] = new Proto.Menu({
                    selector: '#tafelTree_tree_content_id_'+(i+2), 
                    className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
                    menuItems: dynamicPageMenuItems,
                    beforeShow: function(){
                        for(j=0;j<context_menus.length;j++)
                            context_menus[j].container.hide();
                    }
                });
            }
        }else{
            // If the link has a relate page, disable New Page item
            var arr_item = branches[i].getId().split("_");
            if(arr_item[1]!=0)
                fixedLinkMenuItems[4].disabled = true;
            else
                fixedLinkMenuItems[4].disabled = false;
        // Context menu for link item
            context_menus[i] = new Proto.Menu({
                selector: '#tafelTree_tree_content_id_'+(i+2), 
                className: 'menu desktop', // this is a class which will be attached to menu container (used for css styling)
                menuItems: fixedLinkMenuItems,
                beforeShow: function(){
                    for(j=0;j<context_menus.length;j++)
                        context_menus[j].container.hide();
                }
            });
        }
    }
}
</script>
</head>
<body>
<div id="tree_content"></div>
</body>
</html>

